<!--
 * @Author: 又帅又爱学习 501879094@qq.com
 * @Date: 2022-03-28 17:41:14
 * @LastEditors: 又帅又爱学习 501879094@qq.com
 * @LastEditTime: 2022-10-17 17:41:17
 * @FilePath: /vue_demo/src/views/Demo04.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 输入框，只能输入数字，其他的字母或下划线无法输入功能 -->
  <div class="container">
    <input v-model="numbers" class="input" type="text" @input="handleInput">
    <button v-copy="copyText" v-draggable class="el-dialog">复制</button>
    <button v-debounce="debounceClick">防抖</button>
    <!-- <ModelChild v-model="message"></ModelChild> -->
  </div>
</template>

<script>
// import ModelChild from "./ModelChild";
export default {
  components: {
    // ModelChild
  },
  data() {
    return {
      numbers: '',
      message: '1221',
      copyText: 'a copy directives'
    }
  },
  methods: {
    handleInput(e) {
      this.numbers = e.target.value.replace(/[^(\d\\.%)]/g, '')
    },
    debounceClick() {
      console.log('只触发一次')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  left: 50%;
  background-color: red;
}
.input {
  display: block;
  outline: none; // 使用outline属性去掉淡蓝色边框
  margin: 200px auto; //默认带有margin
  width: 200px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border: 0;
  background: rgba(235, 82, 134, 1);
  border-radius: 5px;
  // font-size:***;字体大小最好不要设置 ios上有兼容性问题
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1) !important; //字体颜色
  caret-color: rgba(255, 255, 255, 1) !important; //光标颜色
}
.input::placeholder {
  line-height: 22px;
  font-size: 16px;
  color: #bcbcbc;
  text-align: left;
}
</style>
